<template>
  <div>
    <div class="board">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>电影管理</el-breadcrumb-item>
        <el-breadcrumb-item>电影信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="bill-management-container">
      <div style='padding:8px 0px'>

      <el-row :gutter="24">
        <el-col :span="5" >
          <el-input v-model="pageData.searchText" placeholder="搜索电影名称/区域" autocomplete="off" />
        </el-col>
        <el-col :span="2">
          <el-button type="success" @click='handleSearch'>查询</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="success" @click='addDialogVisible=true'>新增</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table :data="pageData.records"  style="width: 100%" :header-cell-style="{background: '#800000'}">
      <el-table-column label="电影名称" width="180" header-align="center" align="center">
        <template #default="scope">
          <el-popover effect="light" trigger="hover" placement="top" width="auto">
            <template #default>
              <div>电影名称: {{ scope.row.movieName }}</div>
              <div>简介: {{ scope.row.movieIntroduction }}</div>
            </template>
            <template #reference>
              <el-tag>{{ scope.row.movieName }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="时长(分钟)" width="120" header-align="center" align="center">
        <template #default="scope">
          <span>{{ scope.row.movieLength }}</span>
        </template>
      </el-table-column>

      <el-table-column label="区域" width="180" header-align="center" align="center">
        <template #default="scope">
          <span>{{ scope.row.movieArea }}</span>
        </template>
      </el-table-column>

      <el-table-column label="上映时间" width="280" header-align="center" align="center">
        <template #default="scope">
          <span>{{ scope.row.releaseDate }}</span>
        </template>
      </el-table-column>


      <el-table-column label="操作"  header-align="center" align="center">
        <template #default="scope">
          <el-button size="small" type="primary" plain @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="small" type="danger" plain @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        v-model:current-page="pageData.current"
        v-model:page-size="pageData.size"
        :page-sizes="[10, 20, 30, 40]"
        :size="pageData.size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />

    <!-- 新增对话框 -->
    <el-dialog v-model="addDialogVisible" title="新增电影" width="500">
      <el-form :model="addObj">
        <el-form-item label="电影名称" :label-width="formLabelWidth">
          <el-input v-model="addObj.movieName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="时长(分钟)" :label-width="formLabelWidth">
          <el-input v-model="addObj.movieLength" autocomplete="off" />
        </el-form-item>

        <el-form-item label="区域" prop="movieArea">
          <el-select v-model="addObj.movieArea" placeholder="请选择区域" style="width: 100%">
            <el-option label="中国大陆" value="中国大陆"></el-option>
            <el-option label="美国" value="美国"></el-option>
            <el-option label="韩国" value="韩国"></el-option>
            <el-option label="日本" value="日本"></el-option>
            <el-option label="中国香港" value="中国香港"></el-option>
            <el-option label="中国台湾" value="中国台湾"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上映时间" :label-width="formLabelWidth">
          <el-date-picker v-model="addObj.releaseDate" type="datetime" placeholder="选择日期时间" />
        </el-form-item>
        <el-form-item label="电影简介" :label-width="formLabelWidth">
          <el-input v-model="addObj.movieIntroduction" autocomplete="off" />
        </el-form-item>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handlerAddCancel">取消</el-button>
          <el-button type="primary" @click="handlerAdd">确认</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 编辑对话框 -->
    <el-dialog v-model="editDialogVisible" title="编辑电影" width="500">
      <el-form :model="editObj">
        <el-form-item label="电影名称" :label-width="formLabelWidth">
          <el-input v-model="editObj.movieName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="时长(分钟)" :label-width="formLabelWidth">
          <el-input v-model="editObj.movieLength" autocomplete="off" />
        </el-form-item>

        <el-form-item label="区域" prop="movieArea">
          <el-select v-model="editObj.movieArea" placeholder="请选择区域" style="width: 100%">
            <el-option label="中国大陆" value="中国大陆"></el-option>
            <el-option label="美国" value="美国"></el-option>
            <el-option label="韩国" value="韩国"></el-option>
            <el-option label="日本" value="日本"></el-option>
            <el-option label="中国香港" value="中国香港"></el-option>
            <el-option label="中国台湾" value="中国台湾"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上映时间" :label-width="formLabelWidth">
          <el-date-picker v-model="editObj.releaseDate" type="datetime" placeholder="选择日期时间" />
        </el-form-item>
        <el-form-item label="电影简介" :label-width="formLabelWidth">
          <el-input v-model="editObj.movieIntroduction" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handlerEditCancel">取消</el-button>
          <el-button type="primary" @click="handlerEditCommit">确认</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 删除确认对话框 -->
    <el-dialog v-model="deleteDialogVisible" title="删除提示" width="500">
      <span>确认要删除这部电影吗？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmDelete">确认</el-button>
        </div>
      </template>
    </el-dialog>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, computed} from "vue"
import api from '../api'
import lodash from 'lodash'
import { ElMessage } from 'element-plus';

const pageData = ref({
  records: [],
  total: 0,
  size: 10,
  current: 1,
  pages: 1,
  searchText: ''
});

const handleSearch = () => {
  pageData.value.current = 1;
  getTableList();
}

const deleteDialogVisible = ref(false);
const deleteObj = ref({
  movieId: '',
  index: -1
});
// 类型管理表单
const categoryObj = ref({
  movieId: '',
  currentCategories: [],
  selectedCategory: ''
})

// 所有可用类型
const availableCategories = ref([])

const categoryDialogVisible = ref(false)
// 计算属性 - 可用的类型选项
const getavailableCategories = async () => {
  const result = await api.getMovieCategoryList();
  availableCategories.value = result;
}

onMounted(() => {
  getTableList();

});

const addDialogVisible = ref(false);
const addObj = ref({
  movieName: '',
  movieLength: '',
  movieArea: '',
  releaseDate: ''
});


const getTableList = async () => {
  const page = {
    current: pageData.value.current,
    size: pageData.value.size,
    searchText: pageData.value.searchText
  }
  if (!page.searchText) {
    page.searchText = "";
  }
  const result = await api.getMoviePage(page);
  pageData.value = result;
  pageData.value.searchText=page.searchText;
}

const handlerAddCancel = () => {
  addObj.value = {
    movieName: '',
    movieLength: '',
    movieArea: '',
    releaseDate: ''
  };
  addDialogVisible.value = false;
}

const handlerAdd = async () => {
  await api.addMovie(addObj.value);
  getTableList();
  addDialogVisible.value = false;
}

const editDialogVisible = ref(false);
const editObj = ref({
  movieId: '',
  movieName: '',
  movieLength: '',
  movieArea: '',
  releaseDate: ''
});

const handleEdit = (index, row) => {
  editDialogVisible.value = true;
  editObj.value = lodash.clone(row);
}

const handlerEditCancel = () => {
  editDialogVisible.value = false;
}

const handlerEditCommit = async () => {
  await api.editMovie(editObj.value);
  getTableList();
  editDialogVisible.value = false;
}

const handleDelete = (index, row) => {
  deleteObj.value.movieId = row.movieId;
  deleteObj.value.index = index;
  deleteDialogVisible.value = true;
}

const confirmDelete = async () => {
  await api.deleteMovie(deleteObj.value.movieId);
  pageData.value.records.splice(deleteObj.value.index, 1);
  getTableList();
  deleteDialogVisible.value = false;
}

const handleSizeChange = (val) => {
  pageData.value.size = val;
  getTableList();
}

const handleCurrentChange = (val) => {
  pageData.value.current = val;
  getTableList();
}

</script>
<style>
.bill-management-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}
.el-table {
margin-top: 10px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
border-radius: 8px;
overflow: hidden;
}
</style>